<template>
  <div class="home">
    <div class="card">
      <div class="box">
        <div class="item" @click="goToList(0)">
          <div class="circle"><i class="iconfont icon-tanhao"></i></div>
          <div class="desc">未整改/件</div>
          <div class="num">{{noRectified}}</div>
        </div>
        <div class="item" @click="goToList(1)">
          <div class="circle"><i class="iconfont icon-duigou"></i></div>
          <div class="desc">已整改/件</div>
          <div class="num">{{rectified}}</div>
        </div>
      </div>
      <van-divider />
      <div class="list">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
        <van-card
          v-for="(it, i) in list"
          :key="i"
          :desc="it.createTime"
          :title="it.description"
          :thumb="it.image"
        />
        </van-list>
      </div>
    </div>
    <i @click="go" style="font-size: 50px;" class="iconfont icon-zhaoxiangji"></i>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
import request from '@utils/request'

export default {
  name: 'HomeView',
  setup () {
    const rectified = ref(0)
    const noRectified = ref(0)
    const count = ref(1)
    const list = ref([])
    const loading = ref(false)
    const finished = ref(false)

    const onLoad = () => {
      request.post('/photo/list', {
        pageSize: 20,
        pageNum: count.value
      }).then(resp => {
        console.log(resp)
        list.value = list.value.concat(resp.rows.map(col => {
          return {
            ...col,
            image: col.images ? col.images.split(',')[0] : ''
          }
        }))
        count.value++
        loading.value = false
        if (resp.rows.length <= 0) finished.value = true
      })
    }
    return {
      list,
      onLoad,
      loading,
      finished,
      rectified,
      noRectified
    }
  },
  methods: {
    go () {
      this.$router.push('/upload')
    },
    goToList (status) {
      this.$router.push({ name: 'list', query: { status } })
    }
  },
  mounted () {
    request.get('/photo/agg').then(resp => {
      console.log(resp)
      this.rectified = resp.data.rectified
      this.noRectified = resp.data.noRectified
    })
  }
}
</script>

style <style lang="less" scoped>
.home {
  padding: 10px;
  .icon-zhaoxiangji {
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: #f5794d;
  }
  :deep(.van-card__title) {
    color: #333;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    height: 36px;
    max-height: 36px;
    margin-bottom: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
  .card {
    border-radius: 5px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    padding: 10px;
    overflow: hidden;
    color: #273272;
    transition: .3s;
    box-shadow: 0 0 18px 0 rgb(0 0 0 / 5%);
    .box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0 -8px;
      .item {
        width: 50%;
        margin: 0 8px;
        background: #fbfbfb;
        padding: 10px;
        border-radius: 5px;
        .circle {
          background-color: #eeebff;
          border-radius: 50%;
          width: 40px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          margin-bottom: 12px;
        }
        .desc {
          opacity: .6;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #898da0;
          line-height: 14px;
          margin-bottom: 12px;
        }
        .num {
          font-family: Helvetica-Bold;
          font-weight: 700;
          font-size: 16px;
          color: #273272;
          line-height: 28px;
          margin-bottom: 6px;
        }
        &:first-child {
          background: url(../assets/bg1.png) no-repeat;
          background-size: 100%;
          background-color: rgba(229, 246, 237, 1);
          background-position: bottom;
          .circle{
            color: #806bf3;
            i {
              font-size: 18px;
            }
          }
        }
        &:last-child {
          background: url(../assets/bg2.png) no-repeat;
          background-size: 100%;
          background-color: #f8d5c1;
          background-position: bottom;
          .circle{
            color: #56c08b;
            i {
              font-size: 18px;
            }
          }
        }
      }
    }
  }
</style>
